<!-- 外部通讯录 -->
<!--盒子头-->
<div class="box-header">
	<h3 class="box-title">外部通讯录</h3>
	<a class="btn btn-sm btn-default thisrefresh" href="javascript:void(0);" title="刷新" style="padding: 5px;margin-top: -8px;"><span class="glyphicon glyphicon-refresh"></span></a>
	<div class="box-tools">
		<div class="input-group" style="width: 150px;">
			<input type="text" class="form-control input-sm baseKey" placeholder="查找..." value="">
			<div class="input-group-btn">
				<a class="btn btn-sm btn-default baseKeySumbit"> 
					<span class="glyphicon glyphicon-search"></span>
				</a>
			</div>
		</div>
	</div>
</div>
<!--盒子身体-->
<div class="box-body no-padding">
	<div class="table-responsive">
		<table class="table table-hover table-striped">
			<tbody><tr>
				<th scope="col">分类</th>
				<th scope="col">所属公司</th>
				<th scope="col">头像</th>
				<th scope="col">姓名</th>
				<th scope="col">性别</th>
				<th scope="col">Tel</th>
				<th scope="col">E-mail</th>
				<th scope="col">操作</th>
			</tr>
			<tr>
					<td><span>外部通讯录</span></td>
				
				<td><span>辣条有限公司+百度</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>张奇风</span></td>
				<td><span>
					<img src="images/female.png" alt="女" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18899999900</span></td>
				<td><span>1899999@qq.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="5"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="5" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="5" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="移动" thisdid="5" thisusername="张奇风" thisimgpath="images/touxiang/timg.jpg" thisphonenumber="18899999900" thissex="女" thisemail="1899999@qq.com" thiscompany="辣条有限公司+百度" href="javascript:void(0);" class="label sheding thismove">
						<span class="glyphicon glyphicon-retweet"></span> 移动
					</a>
				</td>
			</tr>
			<tr>
					<td><span>外部通讯录</span></td>
				
				<td><span>百度科技有限公司</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>张三</span></td>
				<td><span>
					<img src="images/male.png" alt="男" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18173328976</span></td>
				<td><span>153@qq.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="1"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="1" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="10" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="修改" did="1" href="javascript:void(0);" class="label xiugai thischange">
						<span class="glyphicon glyphicon-edit"></span> 修改
					</a> 
				</td>
			</tr>
			<tr>
					<td><span>外部通讯录</span></td>
				
				<td><span>宋氏集团</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>宋佳</span></td>
				<td><span>
					<img src="images/male.png" alt="男" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18866554433</span></td>
				<td><span>188@qq.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="6"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="6" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="14" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="修改" did="6" href="javascript:void(0);" class="label xiugai thischange">
						<span class="glyphicon glyphicon-edit"></span> 修改
					</a> 
				</td>
			</tr>
			<tr>
					<td><span>外部通讯录</span></td>
				
				<td><span>工大ccu</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>熊熊</span></td>
				<td><span>
					<img src="images/male.png" alt="男" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18877665544</span></td>
				<td><span>123@qq.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="8"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="8" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="36" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="修改" did="8" href="javascript:void(0);" class="label xiugai thischange">
						<span class="glyphicon glyphicon-edit"></span> 修改
					</a> 
				</td>
			</tr>
			<tr>
					<td><span>外部通讯录</span></td>
				
				<td><span>517公司</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>徐徐</span></td>
				<td><span>
					<img src="images/male.png" alt="男" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18899887766</span></td>
				<td><span>asdf@163.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="9"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="9" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="39" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="修改" did="9" href="javascript:void(0);" class="label xiugai thischange">
						<span class="glyphicon glyphicon-edit"></span> 修改
					</a> 
				</td>
			</tr>
			<tr>
					<td><span>大学</span></td>
				
				<td><span>517小分队</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>熊涛</span></td>
				<td><span>
					<img src="images/male.png" alt="男" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18634344455</span></td>
				<td><span>123@qq.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="2"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="2" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="2" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="修改" did="2" href="javascript:void(0);" class="label xiugai thischange">
						<span class="glyphicon glyphicon-edit"></span> 修改
					</a> 
				</td>
			</tr>
			<tr>
					<td><span>重要客户</span></td>
				
				<td><span>xi小小公司</span></td>
				<td><a href="#"> <img src="/image/timg.jpg" class="img-circle" style="width: 25px; height: 25px;">
				</a></td>
				<td><span>小李</span></td>
				<td><span>
					<img src="images/male.png" alt="男" style="width: 20px;height: 20px">
				</span></td>
				<td><span>18877665544</span></td>
				<td><span>123@qq.com</span></td>
				<td style="width: 252px;">
					<a href="javascript:void(0);" class="label xinzeng thisshare" directorid="7"> 
						<span class="glyphicon glyphicon-new-window"></span> 分享
					</a> 
					<a href="javascript:void(0);" director="7" class="label xiugai outlookthis">
						<span class="glyphicon glyphicon-search"></span> 查看
					</a> 
					<a did="34" href="javascript:void(0);" class="label shanchu thisdelete">
						<span class="glyphicon glyphicon-remove"></span> 删除
					</a>
					<a title="移动" thisdid="7" thisusername="小李" thisimgpath="images/touxiang/timg.jpg" thisphonenumber="18877665544" thissex="男" thisemail="123@qq.com" thiscompany="xi小小公司" href="javascript:void(0);" class="label sheding thismove">
						<span class="glyphicon glyphicon-retweet"></span> 移动
					</a>
				</td>
			</tr>
		</tbody></table>
	</div>
</div>
<!--盒子尾-->
<div class="box-footer no-padding" style="margin-top: -20px;">
	<div style="padding: 5px;">
		<div id="page" style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
			<div style="width: 40%; float: left;">
				<div class="pageInfo" style="margin-left: 5px;">
					共<span>7</span>条 | 每页<span>7</span>条
					| 共<span>1</span>页
				</div>
			</div>
			<div style="width: 60%; float: left;">
				<div class="pageOperation">
					<a class="btn btn-sm btn-default no-padding tablefirst" disabled="disabled" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-backward"></span></a> 
					<a class="btn btn-sm btn-default no-padding tableup" disabled="disabled" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-triangle-left"></span></a> 
				<a disabled="disabled" class="btn btn-default no-padding" style="width: 30px; height: 20px;"> 1 </a>
				<!--判断是否是最后一页  -->
					<a class="btn btn-sm btn-default no-padding tabledown" disabled="disabled" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-triangle-right"></span></a> 
					<a class="btn btn-sm btn-default no-padding tablelast" disabled="disabled" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-forward"></span></a> 
				</div>
			</div>
		</div>
	</div>
</div>
<script>
		/* 分页插件按钮的点击事件 */
		/* url是从后台接收过来的链接，sort是记录排序规则 */
		$('.tablefirst').on('click',function(){
			if(!true){
				$('.thistable').load('outaddresspaging?pageNum=1');
			}
		});
		$('.tableup').on('click',function(){
			if(!true){
				$('.thistable').load('outaddresspaging?pageNum=0');
			}
		});
		$('.tabledown').on('click',function(){
			if(!true){
				$('.thistable').load('outaddresspaging?pageNum=2');
			}
		});
		$('.tablelast').on('click',function(){
			if(!true){
				$('.thistable').load('outaddresspaging?pageNum=1');
			}
			
		});
		
		/*类型、状态、时间的排序  */
		$('.thistype').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('outaddresspaging?type=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('outaddresspaging?type=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thisstatus').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('outaddresspaging?status=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('outaddresspaging?status=1&icon=glyphicon-triangle-bottom');
			}
		});
		$('.thistime').on('click', function() {
			if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
				$('.thistable').load('outaddresspaging?time=0&icon=glyphicon-triangle-top');
			} else {
				$('.thistable').load('outaddresspaging?time=1&icon=glyphicon-triangle-bottom');
			}
		});
		/* 查找 */
		$('.baseKetsubmit').on('click', function() {
			var baseKey = $('.baseKey').val();
			console.log(baseKey);
			$('.thistable').load('outaddresspaging?baseKey=' + baseKey);
		});
</script><div class="modal fade" id="shareModal" data-backdrop="static">
	<!--第二步，窗口声明-->
	<div class="modal-dialog modal-lg ">
		<!--第三步、内容区的声明-->
		<div class="modal-content" style="background: #F9F9F9;">
			<div class="modal-1">
				<div class="modal-2">
		<div class="modal-header" style="margin: 10px; margin-top: -20px;">
		<button class="close" data-dismiss="modal" style="display: block; margin: -52px -78px 0 0;; border-radius: 60%;">
			<span class="glyphicon glyphicon-remove-circle" style="color: white; font-size: 30px;"></span>
		</button>
		<div class="row">
			<div class="col-xs-12" style="height: 30px; margin: 10px 0px;">
				<h4 style="float: left;">
					<a class="btn btn-success glyphicon glyphicon-new-window btn-md thisshareuser" href="javascript:void(0);"> 分享联系人</a> 
				</h4>

				<div class="input-group">
					<input type="text" class="form-control input-sm pull-right cha modalbaseKey" placeholder="查找..." value="">
					<div class="input-group-btn chazhao" style="top: -1px;">
						<a class="btn btn-sm btn-default glyphicon glyphicon-search modalbaseKetsubmit" style="height: 30px;" href="javascript:void(0);">
						</a>
					</div>
				</div>
			</div>
			
		</div>
	</div>
	<div class="modal-body modaltable" style="margin: 10px;">
<div class="alert alert-danger alert-dismissable" role="alert" style="display: none;">
								错误信息:
								<button class="close thisclose" type="button">×</button>
								<span class="error-mess"></span>
							</div>
<div class="table-r">
	<table class="table  table-hover  container-fluid ">
		<thead>
			<tr class="row">
				<th class=" col-xs-1">
				</th>
				<th class=" col-xs-1"><span class="labels" style="display: block;"></span></th>
				<th class=" col-xs-2 b">部门</th>
				<th class="col-xs-2 b">职位</th>
				<th class="col-xs-2 b">用户名</th>
				<th class="col-xs-2 b">电话号码</th>
				<th class=" col-xs-2 b">性别</th>
				<th class=" col-xs-2">E-mail</th>
			</tr>
		</thead>
		<tbody>
						<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="1"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image//647cbde6-3fba-4d8c-a50f-1a07f9bee417.jpg">
				</span></td>
				<td class="col-xs-2">总经办</td>
				<td class=" col-xs-2">超级管理员</td>
				<td class="col-xs-2 na">罗密欧</td>
				<td class="col-xs-2 na">13272143450</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">1057@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="2"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/handsome.JPG">
				</span></td>
				<td class="col-xs-2">总经办</td>
				<td class=" col-xs-2">CEO</td>
				<td class="col-xs-2 na">朱丽叶</td>
				<td class="col-xs-2 na">13203318185</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">aaluoxiang@foxmail.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="3"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/eightman.jpeg">
				</span></td>
				<td class="col-xs-2">总经办</td>
				<td class=" col-xs-2">总经理</td>
				<td class="col-xs-2 na">伊丽莎白</td>
				<td class="col-xs-2 na">18683688154</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">255@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="4"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/fiveman.jpeg">
				</span></td>
				<td class="col-xs-2">研发部</td>
				<td class=" col-xs-2">研发部经理</td>
				<td class="col-xs-2 na">小李父斯基</td>
				<td class="col-xs-2 na">18173328888</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">164@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="5"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/fourman.jpeg">
				</span></td>
				<td class="col-xs-2">财务部</td>
				<td class=" col-xs-2">财务部经理</td>
				<td class="col-xs-2 na">soli</td>
				<td class="col-xs-2 na">18173328976</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">173@126.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="6"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/nineman.jpeg">
				</span></td>
				<td class="col-xs-2">市场部</td>
				<td class=" col-xs-2">市场部经理</td>
				<td class="col-xs-2 na">红之花</td>
				<td class="col-xs-2 na">18868688866</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">188@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="7"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/oneman.jpeg">
				</span></td>
				<td class="col-xs-2">人事部</td>
				<td class=" col-xs-2">人事部经理</td>
				<td class="col-xs-2 na">甄姬</td>
				<td class="col-xs-2 na">13117336953</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">188@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="8"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/sevenman.jpeg">
				</span></td>
				<td class="col-xs-2">研发部</td>
				<td class=" col-xs-2">程序员</td>
				<td class="col-xs-2 na">甄姬2</td>
				<td class="col-xs-2 na">13117336954</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">188@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="9"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/twoman.jpeg">
				</span></td>
				<td class="col-xs-2">研发部</td>
				<td class=" col-xs-2">初级工程师</td>
				<td class="col-xs-2 na">甄嬛</td>
				<td class="col-xs-2 na">13034507214</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">55@qq.com</td>
			</tr>
			<tr class="row">
				<td class=" col-xs-1"><span class="labels"><label>
					<input name="id" type="checkbox" userid="10"><i>✓</i></label></span>
				</td>
				<td class=" col-xs-1"><span class="imgs center-block"> <img style="width: 24px; height: 24px;" class="profile-user-img img-responsive img-circle" src="/image/handsome.JPG">
				</span></td>
				<td class="col-xs-2">研发部</td>
				<td class=" col-xs-2">中级工程师</td>
				<td class="col-xs-2 na">无双</td>
				<td class="col-xs-2 na">13117336954</td>
				<td class=" col-xs-2">男</td>
				<td class=" col-xs-2">66@qq.com</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="box-footer no-padding" style="margin-top: -20px;">
	<div style="padding: 5px;">
		<div id="page" style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
			<div style="width: 40%; float: left;">
				<div class="pageInfo" style="margin-left: 5px;">
					共<span>31</span>条 | 每页<span>10</span>条
					| 共<span>4</span>页
				</div>
			</div>
			<div style="width: 60%; float: left;">
				<div class="pageOperation">
				<!--判断是否是第一页  -->
					<a class="btn btn-sm btn-default no-padding tablefirst" disabled="disabled" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-backward"></span></a> 
					<a class="btn btn-sm btn-default no-padding tableup" disabled="disabled" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-triangle-left"></span></a> 
				<a disabled="disabled" class="btn btn-default no-padding" style="width: 30px; height: 20px;">
						1
				</a>
				<!--判断是否是最后一页  -->
					<a class="btn btn-sm btn-default no-padding tabledown" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-triangle-right"></span></a> 
					<a class="btn btn-sm btn-default no-padding tablelast" style="width: 30px; height: 20px;"> <span class="glyphicon glyphicon-forward"></span></a> 
				</div>
			</div>
		</div>
	</div>
</div>
<script>
		/* 分页插件按钮的点击事件 */
		/* url是从后台接收过来的链接，sort是记录排序规则 */
		$('.tablefirst').on('click',function(){
			 if(true==false){
				 $('.modaltable').load('modalpaging?page=0');
			 }
		});
		$('.tableup').on('click',function(){
			 if(true==false){
				 $('.modaltable').load('modalpaging?page=-1');
			 }
		});
		$('.tabledown').on('click',function(){
			if(false==false){
				$('.modaltable').load('modalpaging?page=1');
			 }
		});
		$('.tablelast').on('click',function(){
			if(false==false){
				$('.modaltable').load('modalpaging?page=3');
			 }
			
		});
		/* 查找 */
		$('.modalbaseKetsubmit').on('click', function() {
			var baseKey = $('.modalbaseKey').val();
			console.log(baseKey);
			$('.modaltable').load('modalpaging?baseKey='+baseKey+'');
		});
</script>	</div>
</div>
			</div>
		</div>
	</div>
</div>